import React, { Component, PropTypes } from 'react'
import Slide from 'react-slick'
import { Link } from 'react-router'

class Detail extends Component {
	   constructor(props) {
		super(props);
		this.state = {
			slide:[],
			info:{
				name:"",
				desc:"",
				salepoint:"",
				price:"",
				realprice:"",
				status:1,
				leftNum:100,
				"startDate":""
			}
		};
	}
	componentDidMount() {
       apiInfo({path: '/v1/goods/'+this.props.params.id+'/detail', method: 'get'}).then((data) => {
            this.setState({
              slide:data.imgsList,
              info:{
				  "name":data.goodsName,
				  "desc":data.desc,
				  "salepoint":store.get("integralValue"),
				  "realprice":store.get("price"),
				  "price":store.get("amount"),
				  "status":store.get("status"),
				  "leftNum":store.get("leftNum"),
				  "startDate":store.get("startDate")
			  }
            });
        })
  	}
	buy(){
		//判断是否积分是否够用，如果不够用则不能购买
		console.log(123123);
		if(this.state.info.point<300){
			this.refs.modal.style.display="block";
		}else{
			this.props.history.push("/detail/"+this.props.params.id+"/clear");
		}
	}
	cancel(){
		this.refs.modal.style.display="none";
	}
	gobuy(){
		this.props.history.replace("/detail/"+this.props.params.id+"/clear");
	}
	renderBtn(status,num){
		if(num==0){
			return 	(<section className="product-btn">
					<a  className="disabled" onClick={this.buy.bind(this)}>已售罄</a>
				</section>)
		}
		if(status==3){
				return 	(<section className="product-btn">
					<a onClick={this.buy.bind(this)}>立即购买</a>
				</section>)
		}else if(status==2){
			return	(<section className="product-btn">
					<a  className="disabled" onClick={this.buy.bind(this)}>{this.state.info.startDate}</a>
				</section>)
		}else if(status==4){
				return	(<section className="product-btn">
					<a  className="disabled" onClick={this.buy.bind(this)}>已结束</a>
				</section>)
		}

	}
	render() {
		 var settings = {
            dots: true,
            infinite: false,
            speed: 500,
            autoplay:false
        };
		return (
			<div>
			  {this.props.children|| (<div id="Detail" className="hasstyle">
				   <div style={{minHeight:"122px"}}>
				{this.state.slide.length!=0&& <Slide {...settings}>
					{this.state.slide.map(function(o,i){
						return 	<section key={i}>
						<div className={"face faceInner"}>
							<a><img src={o.url} width="100%"/></a>
						</div>
					</section>
					})}
				</Slide>}
				   </div>
				<section className="product-detail">
					<span className="name">{this.state.info.name}</span>
					<span className="desc">{this.state.info.desc}</span>
					<span className="price">
   						<span>￥{this.state.info.amount}</span>+
						<span><i className="icon"></i>{this.state.info.salepoint}</span>
						<span>总销量 {this.state.info.salecount}</span>
					</span>
					<span className="total">
						<span>价格￥{this.state.info.realprice}</span>
						<span>快递：包邮</span>
						<span>库存 {this.state.info.staycount}</span>
					</span>

				</section>
				<section className="product-info">
					<div className="info-wrapper">
						<div>图文详情</div>
						<div><Link to={`/detail/${this.props.params.id}/info`}>></Link></div>
					</div>
				</section>
				{this.renderBtn(this.state.status,this.state.leftNum)}

				<section className="modal" style={{display:"none"}} ref="modal">
					<div className="back"></div>
					<div className="dialog-content">
						<div className="info">
							<img src={__uri("/static/img/warn-icon.png")}/>
							<p>积分不够，是否原价购买本商品？</p>
							<p>商品原价￥{this.state.info.realprice}</p>
						</div>
						<div className="btn-group">
							<a className="disabled" onClick={this.cancel.bind(this)}>取消</a>
							<a onClick={this.gobuy.bind(this)}>继续购买</a>
						</div>
					</div>

				</section>
			</div>)}
			</div>

		)
	}
}

export default Detail